<!--
 * @Author: yanjikun
 * @Date: 2021-06-29 16:00:37
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-06-16 11:35:28
 * @Description: file content
-->
<template>
  <Tabs
    v-model:activeKey="activeKey"
    size="small"
    hideAdd
    type="editable-card"
    class="tabs-view"
    @change="handleChangeRoute"
    @edit="handleEditRoute"
    :tabBarStyle="{ margin: '0' }"
  >
    <Tabs.TabPane v-for="tab in tabsList" :key="tab.fullPath">
      <template #tab>
        <Dropdown :trigger="['contextmenu']">
          <span>{{ tab.meta?.title }}</span>
          <template #overlay>
            <Menu>
              <Menu.Item key="1"> <RedoOutlined class="mr-8px" />重新加载 </Menu.Item>
              <Menu.Item key="2" @click="removeTabs(tab)">
                <CloseOutlined class="mr-8px" />关闭标签页
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item key="3" @click="handleCloseLeftTabs(tab)">
                <VerticalRightOutlined class="mr-8px" />关闭左侧标签页
              </Menu.Item>
              <Menu.Item key="4" @click="handleCloseRightTabs(tab)">
                <VerticalLeftOutlined class="mr-8px" />关闭右侧标签页
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item key="5" @click="handleCloseOtherTabs(tab)">
                <CloseCircleOutlined class="mr-8px" /> 关闭其他标签页
              </Menu.Item>
              <Menu.Item key="6"><MinusOutlined class="mr-8px" />关闭全部标签页</Menu.Item>
            </Menu>
          </template>
        </Dropdown>
      </template>
    </Tabs.TabPane>
    <template #rightExtra>
      <span class="tabs-view-more_icon">
        <RedoOutlined />
      </span>
      <Divider type="vertical" style="height: 30px" />
      <Dropdown placement="bottomLeft" :trigger="['click']">
        <span class="tabs-view-more_icon">
          <DownOutlined />
        </span>
        <template #overlay>
          <Menu>
            <Menu.Item key="1"> <RedoOutlined class="mr-8px" />重新加载 </Menu.Item>
            <Menu.Item key="2" @click="removeTabs(route)">
              <CloseOutlined class="mr-8px" />关闭标签页
            </Menu.Item>
            <Menu.Divider />
            <Menu.Item key="3" @click="handleCloseLeftTabs(route)">
              <VerticalRightOutlined class="mr-8px" />关闭左侧标签页
            </Menu.Item>
            <Menu.Item key="4" @click="handleCloseRightTabs(route)">
              <VerticalLeftOutlined class="mr-8px" />关闭右侧标签页
            </Menu.Item>
            <Menu.Divider />
            <Menu.Item key="5" @click="handleCloseOtherTabs(route)">
              <CloseCircleOutlined class="mr-8px" /> 关闭其他标签页
            </Menu.Item>
            <Menu.Item key="6"> <MinusOutlined class="mr-8px" />关闭全部标签页</Menu.Item>
          </Menu>
        </template>
      </Dropdown>
    </template>
  </Tabs>
</template>

<script lang="ts" setup>
  import { Tabs, Dropdown, Menu, Divider } from 'ant-design-vue'
  import {
    DownOutlined,
    RedoOutlined,
    CloseOutlined,
    VerticalRightOutlined,
    VerticalLeftOutlined,
    CloseCircleOutlined,
    MinusOutlined,
  } from '@ant-design/icons-vue'
  import { useTabsView } from './useTabsView'
  defineOptions({
    name: 'YTabsView',
  })
  const {
    route,
    tabsList,
    activeKey,
    handleChangeRoute,
    handleEditRoute,
    removeTabs,
    handleCloseLeftTabs,
    handleCloseRightTabs,
    handleCloseOtherTabs,
  } = useTabsView()
</script>

<style lang="less" scoped>
  .tabs-view {
    @apply bg-white;

    :deep(.ant-tabs-bar) {
      @apply m-0 border border-solid py-2px pr-16px pl-0;
      border-color: #f0f0f0;

      .ant-tabs-nav {
        @apply m-0;
      }
    }

    .tabs-view-more_icon {
      @apply px-8px py-0 cursor-pointer;
      color: rgba(0, 0, 0, 0.45);

      &:hover {
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }
</style>
